<script setup lang="ts">
const {push, addRoute} = useRouter()
import {RouteRecordRaw, useRouter} from "vue-router";
import {usePermissionStore} from "@/store/modules/permission";
import {onMounted, onUnmounted, reactive, ref} from "vue";
import {useStorage} from "@/hooks/web/useStorage";
const {setStorage} = useStorage()
const timer = ref()
const loading = ref()
const permissionStore = usePermissionStore()
import {getOrder, orderResult} from "@/api/order";
const orderData = reactive({
  order_no: '',
  code_url: '',
  name: '',
  idnum: '',
  phone: '',
})

const handlePay = async () => {
  const routers = ['/']
  setStorage('roleRouters', routers)
  await permissionStore.generateRoutes('frontEnd', routers).catch(() => {
  })
  permissionStore.getAddRouters.forEach((route) => {
    addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
  })
  permissionStore.setIsAddRouters(true)
  push({path: '/'})
}

const fetchData = async () => {
  try {
    loading.value = true
    let res = await getOrder()
    console.log(res);
    if (res) {
      Object.assign(orderData, res.data)
      if (res.data.pay_status == 1) {
        await handlePay()
      } else {
        timer.value = setInterval(fetchOrder, 3000)
      }
    }
  } finally {
    loading.value = false
  }
}

const fetchOrder = async () => {
  let res = await orderResult({order_no: orderData.order_no})
  console.log(res);
  if (res) {
    if (res.data.code == 1) {
      clearInterval(timer.value)
      await handlePay()
    }
  }
}

onMounted(() => {
  fetchData()
})

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<template>
  <div class="pay-base">
    <el-row justify="center">
      <el-col :span="18" class="pay-wrap" :xs="24" v-loading="loading">
        <el-form label-width="100px" label-position="left">
          <el-form-item label="姓名:">
            <span>{{ orderData.name }}</span>
          </el-form-item>
          <el-form-item label="身份证号码:">
            <span>{{ orderData.idnum }}</span>
          </el-form-item>
          <el-form-item label="手机号码:">
            <span>{{ orderData.phone }}</span>
          </el-form-item>
          <el-form-item label="缴费项目:">
            <span>考试费</span>
          </el-form-item>
          <el-form-item label="缴费金额:">
            <span style="color: #F45D38;font-weight: bold">¥500</span>
          </el-form-item>
          <el-form-item label="支付方式:">
            <div class="pay-type" @click="handlePay">
              <img src="../../assets/imgs/pay.png" alt="">
              微信支付
            </div>
          </el-form-item>
          <el-form-item label="" class="can-code">
            <div class="can-notice">
              <span>扫码支付</span>
              <span>使用微信APP扫码完成支付</span>
            </div>
            <div class="code-pay">
              <el-image :src="orderData.code_url" style="width: 130px; height: 130px"></el-image>
              <div class="pay-number">
                <div class="title">支付金额</div>
                <span class="icon">¥</span><span>500</span>
              </div>
            </div>
            <div class="notice">
              *提示: 缴纳考试费才可以参加朗斯在线测评考试
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="less">
.pay-base {
  height: 100vh;

  .pay-wrap {
    padding: 30px 30px 15px 30px;
    margin-top: 50px;
    border-radius: 7px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }

  .notice {
    font-size: 13px;
    color: #F56C6C;
  }

  .pay-type {
    width: 110px;
    height: 34px;
    border-radius: 5px;
    text-align: center;
    line-height: 35px;
    color: #fff;
    font-size: 14px;
    background-color: #4CAE53;

    img {
      width: 15px;
    }
  }

  //微信扫码支付部分
  .can-code {
    background-color: #F5F7FA;
    border-radius: 5px;
    padding: 15px 0;

    /deep/ .el-form-item__content {
      flex-direction: column;
      align-items: normal;
    }

    .can-notice {
      margin-bottom: 10px;

      span:nth-child(1) {
        font-weight: bold;
        font-size: 17px;
        margin: 0 10px 20px 0;
      }

      span:nth-child(2) {
        font-size: 14px;
        color: #909399;
      }
    }

    .code-pay {
      display: flex;

      .pay-number {
        margin-left: 20px;
        font-weight: bold;

        .title {
          font-size: 14px;
        }

        span {
          color: #F45D38;
        }

        span:nth-child(2) {
          font-size: 15px;
        }

        span:nth-child(3) {
          font-size: 23px;
          margin-left: 3px;
        }
      }
    }
  }
}

/deep/ .el-form-item__label {
  font-size: 15px;
}

/deep/ .el-form-item__content {
  font-size: 15px;
  color: #303133;
}
</style>